<div class="alarm-list alarm-flex" (window:resize)="onResize($event)">
  <!--报警分类  -->
  <!-- <header class="alarm-main-header">
    <span (click)="onAlarmCategoryClick(alarmCategory)" *ngFor="let alarmCategory of alarmCategoryDatas" [ngClass]="{ on: alarmCategory.isChecked }">
{{alarmCategory.alarmCategoryName}}
</span>
  </header> -->
  <!-- <header>当日故障信息</header> -->
  <header class="alarm-main-header">
        <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
      历史报警
    </span>
        <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
      报警统计
    </span>
    </header>
  <section class="alarm-full alarm-main-content" #alarmTable *ngIf="active==0">
    <section class="alarm-main-fault alarm-flex" 
      *ngFor="let alarmCategory of alarmCategoryDatas; let i=index" 
      [ngClass]="{'alarm-hide':!alarmCategory?.isChecked}">
     
        <section class="alarm-full alarm-table" id="alarm-table" > 
        <p-dataTable 
          [value]="alarmCategory?.faultDatas" 
          [lazy]="true" 
          [rows]="row" 
          [paginator]="true" 
          [totalRecords]="alarmCategory?.faultLength" 
          (onLazyLoad)="loadData($event,i)">

          <p-column field="faultCode" header="故障码">
              <ng-template let-col let-data="rowData" pTemplate="body">
                  <span [style.background]="data.faultLevelColor">{{data[col.field]}}</span>                 
              </ng-template>
          </p-column>
          <!-- <p-column field="turbComponentName" header="故障类别"></p-column>
          <p-column field="faultLevelName" header="故障等级"></p-column> -->
          
          <p-column field="faultTime" header="开始时间" >
              <ng-template let-col let-data="rowData" pTemplate="body">
                  <span  [title]="data[col.field]">{{data[col.field]|date:"MM-dd HH:mm"}}</span>
              </ng-template>
          </p-column>
            <p-column field="faultEndTime" header="结束时间" >
              <ng-template let-col let-data="rowData" pTemplate="body">
                  <span  [title]="data[col.field]">{{data[col.field]|date:"MM-dd HH:mm"}}</span>
              </ng-template>
          </p-column>
          <p-column field="faultDesc" header="故障描述" >
            <ng-template let-col let-data="rowData" pTemplate="body">
                <span style="display:inline-block;width:100%;overflow:hidden;padding:0" [title]="data[col.field]">{{data[col.field]}}</span>
            </ng-template>
        </p-column>
        </p-dataTable>
      </section>
    </section>
  </section>
  <!--报警统计  -->
  <section class="alarm-main-content alarm-full" *ngIf="active==1">
    <section class="alarm-main-fault alarm-flex">
      <section class="alarm-full alarm-table" id="countTable" #countTable *ngFor="let alarmCategory of alarmCategoryDatas; let i=index" [ngClass]="{'alarm-hide':!alarmCategory.isChecked}">
        <p-dataTable [value]="alarmCategory?.faultCounts" [rows]="rowC" [lazy]="true" [paginator]="true" [totalRecords]="alarmCategory?.faultCountLength"
          (onLazyLoad)="loadCountData($event,i)">
          <p-column field="faultCode" header="故障码">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span [style.background]="data.faultLevelColor">{{ data[col.field] }}</span>
            </ng-template>
          </p-column>
          
          <p-column field="faultCount" header="报警次数"></p-column>
          <p-column field="faultWorkTime" header="持续时间(h)"></p-column>
          <p-column field="faultDesc" header="故障描述">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span style="display:inline-block; width:100%; overflow:hidden; padding:0" [title]="data[col.field]">{{data[col.field]}}</span>
            </ng-template>
          </p-column>
        </p-dataTable>
      </section>
    </section>
  </section>
</div>
